<template>
  <div class="login_register wh100">
    <navBar title="绑定" :leftArrowFlag="true"></navBar>
    <div class="login_form_wrap">
      <van-form @submit="Submit" class="form">
        <van-field
          v-model="phone"
          type="tel"
          name="phone"
          clearable
          label="手机号"
          :rules="[
            { required: true, message: '请填写您的手机号码！' },
            { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
          ]"
          placeholder="请输入您的手机号"
        />
        <div class="form_item">
          <van-field
            class="form_code"
            v-model="code"
            center
            clearable
            label="验证码"
            :rules="[{ required: true, message: '请填写验证码！' }]"
            placeholder="请输入短信验证码"
          />
          <van-button
            class="code_btn"
            size="small"
            type="primary"
            @click="sendCode"
            :disabled="!disabledCodeBtn"
            >{{ btnText }}</van-button
          >
        </div>

        <div class="form_btn">
          <van-button round block type="primary" native-type="submit"
            >绑定</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar";
import { register, login, getVerificationCode } from "@/api/user";
export default {
  name: "loginRegister",
  data() {
    return {
      msgType:2,
      disabledCodeBtn: true, //按钮状态
      phone: "", //手机号
      code: "", //验证码
      timer: null, //定时器标识
      btnText: "发送验证码", //按钮文字
      passErrMessage: "",
    };
  },
  created() {},
  components: {
    navBar,
  },
  mounted() {},
  methods: {
    //手机验证码登录
    async Submit() {
      console.log("11");
      const { phone, msgType, code } = this;
      console.log(phone);
      let params = {
        phone,
        codeType: msgType,
        code,
        type: 2,//
        openId:localStorage.getItem('openId')
      };
      console.log(params,'参数')
      let res = await login(params);
    if (res.code == "2000") {
        console.log(res)
        this.$toast.success('登录成功');
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userId", res.data.userId);
        this.$router.replace("/my");
    } else {
        this.$toast.fail(res.msg ||  "数据请求失败");
    }
    },
    //发送验证码
    async sendCode() {
        if(!this.phone){
            //this.$toast.fail('请先输入手机号');
            return false;
        }
      let params = {
        mobile: this.phone,
        msgType: this.msgType,
      };
      let result = await getVerificationCode(params);

      if (result.code == "2000") {
        this.$toast.success('发送成功');
        this.countDown(10);
      } else {
        this.$toast.fail(res.result);
      }
    },
    // 倒计时方法
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = true;
        this.btnText = "发送验证码";
        return;
      } else {
        this.disabledCodeBtn = false;
        this.btnText = "重新发送(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.login_register {
  display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
  -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
  .login_form_wrap {
    flex: 1;
    padding: 0.5rem 0.25rem 0;
    .form {
      /deep/ .van-cell {
        background: #f8f8f8;
      }
      /deep/ .van-field__label {
        width: 0.5rem;
        text-align: right;
      }
      .show_phone {
        margin: 0.25rem 0;
        font-size: 15px;
        line-height: 0.225rem;
        color: $textColor;
        .tips {
          color: $lightBlack;
        }
        .phone {
          font-weight: 600;
        }
      }
      .form_item {
        width: 100%;
        height: 0.44rem;
        display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
        -moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
        margin-bottom: 1.8rem;
        margin-top: 0.15rem;
        .form_code {
          width: 1.9rem;
          height: 100%;
          background: #f8f8f8;
          /deep/ .van-field__label {
            width: auto;
            padding-left: 0.1rem;
          }
        }
        /deep/ .van-button--primary {
          width: 1.17rem !important;
          height: 0.44rem !important;
        }
      }
    }
  }
}
</style>